<template>
<div class="home">
  <div class="swiper">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="swiperList.length">
      <van-swipe-item v-for="(item) in swiperList" :key="item.id">
        <img :src="item.imgUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
  </div>
  </div>
</template>

<script>
export default {
  name: 'homeSwiper',
  data () {
    return {
      imageList: [
        {
          id: '001',
          imgUrl:
            'https://imgs.qunarzz.com/sight/source/1507/e0/4aae49007c8a64.jpg_r_640x214_65a42783.jpg'
        },
        {
          id: '002',
          imgUrl:
            'https://imgs.qunarzz.com/sight/source/1505/d5/abe8a48a6ef8bf.jpg_r_640x214_7c41cc81.jpg'
        }
      ]
    }
  },
  props: {
    swiperList: Array
  }
}
</script>

<style lang="scss" >
.swiper {
  overflow: hidden;
  width: 100%;
  padding-bottom: 37.86%;
  height: 0;
  .my-swipe {
    .van-swipe-item {
      height: 284px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
